<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>用户测试用例</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        p{
            margin-top:10px;
        }

      .comment-submit {
            width: 70px;
            height: 64px;
            position: absolute;
            right: -80px;
            top: 0;
            padding: 4px 15px;
            font-size: 14px;
            color: #fff;
            border-radius: 4px;
            text-align: center;
            min-width: 60px;
            vertical-align: top;
            cursor: pointer;
            background-color: #00a1d6;
            border: 1px solid #00a1d6;
            transition: 0.1s;
            user-select: none;
            outline: none;
        }
        hr {
            width: 700px;
            margin-left: 391px;
        }
        .Cuser{
            width: 100px;
        }
        .Ccontent{
        width: 580px;
        }
        .Ctime{
            width: 250px;
        }
    </style>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/jquery.danmu.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/axios.js}"></script>

</head>
<body>
<div id="app">
<div style="position:relative;width:100%;height:auto;background:#000;">
    <div id="danmu" style="background:#000;margin: auto;width:100%">
        <div  class="prism-player" id="J_prismPlayer">

        </div>
    </div>
</div>
<div style="width:50% ;position:absolute;margin-left: 36%;margin-top: 460px">
    发弹幕:
    <select name="color" id="color">
        <option value="white">白色</option>
        <option value="red">红色</option>
        <option value="green">绿色</option>
        <option value="blue">蓝色</option>
        <option value="yellow">黄色</option>
    </select>
    <select name="size" id="text_size">
        <option value="1">大文字</option>
        <option value="0">小文字</option>
    </select>
    <select name="position" id="position">
        <option value="0">滚动</option>
        <option value="1">顶端</option>
        <option value="2">底端</option>
    </select>
    <input type="textarea" id="text" max="300">
    <button type="button" onclick="send()">发送</button>
</div>
<div id="comments" style="position:absolute;width:100%;margin-top: 490px">
 <div id="content">
     <span>
         <textarea v-model="comment" id="comment"  style="margin-left: 451px;resize:none" cols="80" name="msg" rows="5" placeholder="发条友善的评论" class="ipt-txt"></textarea>
<!--         <input type="textarea" id="commentText" style="width: 400px;height: 100px">-->
         <button type="submit" class="comment-submit" style="margin-right: 476px;margin-top: 7px;" @click="sendComment()">发表评论</button>
     </span>
    <ul id="commentList">
        <li v-for="comment in commentList" style="width: 100%;">
        <p class="Cuser"  style="margin-left: 460px;">
            <label>用户:</label> <span style="color: #FF00FF">{{comment.user}}</span>
        </p>
        <p class="Ccontent" style="margin-left: 460px;">
            <label>所评:</label> <span>{{comment.content}}</span>
        </p>
        <p class="Ctime" style="margin-left: 460px;">
            <span style="font-size: 12px;color:gray">{{comment.time}}</span>
        </p>
        <hr style="margin-top:20px">
        </li>

<!--        <li style="width: 100%;">-->
<!--            <p class="Cuser"  style="margin-left: 460px;">-->
<!--                名称:1-->
<!--            </p>-->
<!--            <p class="Ccontent" style="margin-left: 460px;">-->
<!--                <span>评论内容</span>-->
<!--            </p>-->
<!--             <p class="Ctime" style="margin-left: 460px;">-->
<!--                 2020-17-8 20:11:13-->
<!--             </p>-->
<!--            <hr style="margin-top:20px">-->
<!--        </li>-->
    </ul>
 </div>
</div>
</div>
<script th:src="@{/js/comment.js}"></script>
<script>
    var player = new Aliplayer({
        //播放方式二：点播用户推荐
        id: "J_prismPlayer",
        vid: '[[${vid}]]', // 视频id
        playauth: '[[${playAuth}]]', // 播放凭证
        encryptType: "1", // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
        width: "100%",
        height: "450px",
        // 以下可选设置
        qualitySort: "asc", // 清晰度排序
        mediaType: "video", // 返回音频还是视频
        autoplay: false, // 自动播放
        isLive: false, // 直播
        rePlay: false, // 循环播放
        controlBarVisibility: "hover", // 控制条的显示方式：鼠标悬停
        useH5Prism: true, // 播放器类型：html5
    },function(player){
        console.log('播放器创建好了。')
    });
    $(function(){
        $("#danmu").danmu({
            height: 450,  //弹幕区高度
            width: "100%",   //弹幕区宽度
            zindex :100,   //弹幕区域z-index属性
            speed:6000,      //滚动弹幕的默认速度，这是数值值得是弹幕滚过每672像素所需要的时间（毫秒）
            sumTime:90000000000000,   //弹幕流的总时间
            danmuLoop:false,   //是否循环播放弹幕
            defaultFontColor:"#FFFFFF",   //弹幕的默认颜色
            fontSizeSmall:16,     //小弹幕的字号大小
            FontSizeBig:24,       //大弹幕的字号大小
            opacity:"0.9",            //默认弹幕透明度
            topBottonDanmuTime:6000,   // 顶部底部弹幕持续时间（毫秒）
            SubtitleProtection:false,     //是否字幕保护
            positionOptimize:false,         //是否位置优化，位置优化是指像AB站那样弹幕主要漂浮于区域上半部分
            maxCountInScreen: 40,   //屏幕上的最大的显示弹幕数目,弹幕数量过多时,优先加载最新的。
            maxCountPerSec: 10      //每分秒钟最多的弹幕数目,弹幕数量过多时,优先加载最新的。
        });
        $('#danmu').danmu('danmuStart');
    });
    function send(){
        var text = $("#text").val();
        if(text==''){
            return
        }
        var position = $("#position").val();
        var text_size = $("#text_size").val();
        var color = $("#color").val();
        var time = $('#danmu').data("nowTime")+5;
        var a_danmuzz = {text:text,color:color ,size:text_size,position:position,time:time};
        $('#danmu').danmu("addDanmu",a_danmuzz);
        $("#text").val('');
    }
</script>
</body>
</html>